<template>
     
  <van-pull-refresh
    v-model="isLoading"
    success-text="刷新成功"
    @refresh="onRefresh"
  >
    <div class="attention">
      <!-- <h1>九列表的首页的关注1</h1> -->
      <div class="title">
        <h2>豆果美食, 会做饭很酷~</h2>

        <p class="firsttex">你关注人的动态会出现在这</p>

        <p class="twotex">为你推荐了一些有趣的人.快关注TA们吧</p>
      </div>

      <div class="product">
        <div class="shuju" v-for="(item, index) in productData" :key="index">
          <!-- v-for="(item,index) in productData" :key = index -->

          <div class="content">
            <div class="top">
              <div class="authorimg"><img :src="item.u.p" alt="" /></div>

              <div class="left">
                <div class="introduce">
                  <div class="thelv">
                    <p>{{ item.u.n }}</p>

                    <span>LV.{{ item.u.lv }} </span>
                  </div>
                  <p>
                    {{ item.u.followers_count_text }}·{{
                      item.u.recipes_count_text
                    }}
                  </p>
                </div>
              </div>
              <div class="right">关注</div>
            </div>
          </div>
          <div class="title"></div>

          <div class="theimg" @click="clicsearch(item.item_id)">
            <img :src="item.img" alt="" />
          </div>
          <!-- <div class="theimg">
        {{item.u.p}}
      <img :src="item.img" alt="" />
    </div> -->

          <div class="foot">
            <div class="firrow">
              <div class="left">
                <div class="collect">
                  <div class="imgs">
                    <img class="img isone" :src="item.p" alt="" />
                  </div>

                  <p>{{ item.collect_count_text }}</p>
                </div>
              </div>

              <div class="right">
                <div class="one icon">
                  <van-icon name="star-o" size="30px" />
                </div>
                <div class="two icon">
                  <van-icon name="chat-o" size="30px" />
                </div>
                <div class="thr icon">
                  <van-icon name="share-o" size="30px" />
                </div>
              </div>
            </div>

            <div class="thrrow">
              <p></p>
              <p>{{ item.n }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
       
  </van-pull-refresh>
</template>
<!-- this.getRecommend -->
<script>
import { Toast } from "vant";
export default {
  name: "Attention",

  data() {
    return {
      count: 10,
      isLoading: false,
      productData: [],

      listNaviga: [{ title: "标题" }],

      tabIndex: 0,
    };
  },

  created() {
    this.GetAttention();
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
        this.count += 10;
        this.GetAttention();
      }, 1000);
    },
    GetAttention() {
      this.axios({
        method: "get",
        url: `https://apis.netstart.cn/douguo/home/ffeeds/${this.count}/20?offset=0&limit=20&关注列表=`,
        //get请求参数写在params中
        params: {
          appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
          offset: "0",
          limit: "20",
        },
      })
        .then((result) => {
          // console.log("result==>", result);
          this.productData = result.data.result.rfs;
        

          // console.log(" this.productData==>", this.productData);
          //输出结果看一下
        })
        .catch((err) => {
          console.log("err==>", err); //用来捕获错误

          // console.log("err==>",err);
        });
    },

    clicsearch(id) {
  
      this.$router.push({ name: "Shicaixqin",query:{ id } });
    },
  },
};
</script>

<style lang="less" scoped>
.attention {
  .title {
    padding-left: 20px;
    margin: 0;
    h2 {
      font-size: -0.5333rem;
      font-weight: 1000;
      margin-top: 0;
      margin-bottom: 6px;
      color: #323232;
    }
    .firsttex {
      margin-top: 8px;
      font-size: small;
      font-weight: 700;
      color: #ababab;
      margin-bottom: 0;
    }
    .twotex {
      margin-top: 8px;
      font-size: small;
      font-weight: 700;
      color: #ababab;
      margin: 0;
    }
  }
  .content {
    .top {
      padding-top: 30px;
      padding-left: 20px;
      display: flex;
      padding-bottom: 16px;

      .authorimg {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        padding-right: 10px;
        text-align: center;
        img {
          display: block;
          width: 100%;
          border-radius: 50%;
        }
      }
      .left {
        margin-left: 0;
        .introduce {
          .thelv {
            display: flex;
            justify-items: center;
            align-items: center;
            p {
              color: #313131;
              margin: 0;
              font-size: larger;
              font-weight: 800;
            }
            span {
              margin-left: 8px;
              font-weight: 900;
              font-size: small;
              color: #d7b96a;
              font-style: oblique;
            }
          }

          p {
            margin: 0;
            font-size: small;
            font-weight: 700;
            color: #bcbcbc;
          }
        }
      }
      .right {
        margin: 0;
        width: 80px;
        height: 35px;
        background-color: #ffc533;
        text-align: center;
        line-height: 35px;
        border-radius: 50px 50px 50px 50px;
        font-size: medium;
        font-weight: 800;
        color: #2c2c2a;
      }
    }

    .top div:nth-child(3) {
      margin-left: auto;
      margin-right: 15px;
    }
  }

  .theimg {
    box-sizing: border-box;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .foot {
    .firrow {
      padding-left: 20px;
      display: flex;
      justify-content: center;
      align-items: center;

      .left {
        .collect {
          justify-content: center;
          align-items: center;
          display: flex;
          .imgs {
            border: 1px solid #ffffff;
            display: flex;
            box-sizing: border-box;
            overflow: hidden;
            text-align: center;
            img {
              width: 20px;
              height: 20px;
              display: block;
              width: 100%;
              margin-left: -5px;
              border-radius: 50%;
            }
          }
          .imgs .isone {
            margin: 0;
          }

          p {
            color: #4b4b4b;
            font-size: small;
            font-weight: 800;
            margin-left: 8px;
          }
        }
      }
      .right {
        display: flex;
        margin-left: auto;
        align-items: center;
        margin-right: 16px;

        box-sizing: border-box;
        overflow: hidden;
        .thr {
          padding: 0px !important;
          .isthr {
            padding: 0px;
            background-color: red;
          }
        }
        .icon {
          text-align: center;
          padding-right: 20px;
          font-size: larger;
          font-weight: 600;

          img {
            width: 20px;
            height: 20px;
            display: block;
            width: 100%;
            border-radius: 50%;
          }
        }
      }
    }
    .tworow {
      margin: 0;
      p {
        margin: 0;
        padding-left: 15px;
        font-size: medium;
        font-weight: 700;
      }
    }
    .thrrow {
      margin: 0;
      p {
        margin: 0;
        color: #569aa3;
        padding-top: 6px;
        padding-left: 15px;
        font-size: medium;
        font-weight: 800;
        // margin-bottom: 30px;
      }
    }
  }
}
</style>
